<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:p="http://primefaces.org/ui">
    <h:head>
        <link type="text/css" rel="stylesheet" href="resources/css/umat.css" />
        <f:facet name="first">
            <meta http-equiv="X-UA-Compatible" content="EmulateIE8" />
            <meta content='text/html; charset=UTF-8' http-equiv="Content-Type"/>
            <title>User Model Authoring Tool</title>
        </f:facet>
        <style type="text/css">
            .ui-layout-north {
                z-index:20 !important;
                overflow:visible !important;;
            }

            .ui-layout-north .ui-layout-unit-content {
                overflow:visible !important;
            }
        </style>
    </h:head>
    <h:body>
        <h:form id="dialog_form">
            <p:growl id="messages" showDetail="true" />

            <p:confirmDialog id="confirmDelDialog" message="Are you sure you want to delete this node?" header="Delete" widgetVar="deleteConfirm"> 
                <p:commandButton id="confirmDelete" value="Yes" update=":treeForm:tree, messages" oncomplete="deleteConfirm.hide()" actionListener="#{tree.deleteNode}" style="font-size: small"/>
                <p:commandButton id="declineDelete" value="No" onclick="deleteConfirm.hide()" type="button" style="font-size: small"/> 
            </p:confirmDialog>

            <p:confirmDialog id="confirmEditDialog" message="Insert New Name" header="Edit" widgetVar="editName">
                <p:inputText id="inputName" value="#{tree.name}" style="margin: 10px"/>
                <p:commandButton id="confirmEdit" value="Ok" update=":treeForm:tree" oncomplete="editName.hide()" actionListener="#{tree.editName}" style="font-size: small"/>
                <p:commandButton id="declineEdit" value="Cancel" onclick="editName.hide()" type="button" style="font-size: small"/> 
            </p:confirmDialog>
            <p:dialog id="helpDialog" widgetVar="helpD" width="550" height="250" position="center" resizable="false">
                <h:panelGrid columns="1">
                    <h:outputText value="In order to add nodes or fields use the controls on the right." style="font-size: medium" />
                    <h:outputText value="If you want to delete a node, right click on it and click on delete." style="font-size: medium"/>
                    <h:outputText value="To edit the fields of a node, right click on it and click view." style="font-size: medium"/>
                    <h:outputText value="After you're done, click on the Tree menu and then Save to XML in order to save the file in your browsers default download location" style="font-size: medium"/>
                    <h:outputText value="If you want to upload an existing file, simply drag and drop the file in the File Upload section, in the lower part of the page.
                                        You can also use the Upload file button in order to select a your file. You are limited to single 1 Mb file." style="font-size: medium"/>
                    
                    <p:commandButton oncomplete="helpD.hide()" value="Ok" style="left: 90% " /> 
                </h:panelGrid>
            </p:dialog>
        </h:form>
        <p:layout fullPage="true">
            <p:layoutUnit id="center" position="center">
                <h:form id="treeForm">
                    <p:contextMenu id="Tree_Context_Menu" for="tree">
                        <p:menuitem value="View Fields" update="tree" oncomplete="viewD.show()" icon="ui-icon-search" />
                        <p:menuitem value="Edit Name" update="tree, :dialog_form:messages" oncomplete="editName.show()" icon="ui-icon-edit" />
                        <p:menuitem value="Delete Node" update="tree" oncomplete="deleteConfirm.show()" icon="ui-icon-close"/>
                    </p:contextMenu>

                    <p:tree id="tree" 
                            value="#{tree.backBone}"  
                            var="node" 
                            selectionMode="single"
                            cache="true"
                            dynamic="true"
                            selection="#{tree.selectedNode}" 
                            >

                        <p:ajax event="select" update=":treeForm:fields" listener="#{tree.onNodeSelect}"/>

                        <p:treeNode>
                            <h:outputText style="left: auto;" value="#{node}" />
                        </p:treeNode>
                    </p:tree>

                    <p:dialog id="viewDialog" widgetVar="viewD" header="Fields of #{tree.selectedNode.data}">
                        <p:dataTable id="fields" var="fields" value="#{tree.selectedNode.fields}" rowKey="#{fields.type}"
                                     selection="#{tree.selectedNode.selectedFields}" selectionMode="multiple" editable="true" widgetVar="fields">

                            <f:facet name="header">
                                Hold down CTRL to select multiple rows
                            </f:facet>
                            <p:column headerText="Type">
                                <p:cellEditor> 
                                    <f:facet name="output">
                                        <h:outputText value="#{fields.type}" />
                                    </f:facet>
                                    <f:facet name="input">
                                        <p:selectOneMenu id="type" required="false" value="#{tree.selectedNode.fieldType}">
                                            <f:selectItem itemLabel="String" itemValue="String" />
                                            <f:selectItem itemLabel="Integer" itemValue="Integer" />
                                            <f:selectItem itemLabel="Double" itemValue="Double" />
                                            <f:selectItem itemLabel="Date" itemValue="Date" />
                                            <f:selectItem itemLabel="Image" itemValue="Image" />
                                        </p:selectOneMenu>
                                    </f:facet>
                                </p:cellEditor>
                            </p:column>

                            <p:column headerText="Name">    
                                <p:cellEditor> 
                                    <f:facet name="output">
                                        <h:outputText value="#{fields.name}" />
                                    </f:facet>
                                    <f:facet name="input">
                                        <h:inputText value="#{fields.name}" style="width: 100%"/>
                                    </f:facet>
                                </p:cellEditor>
                            </p:column>
                            <p:column headerText="Edit" style="width: 50px">
                                <p:rowEditor />
                            </p:column>
                            <f:facet name="footer">
                                <p:commandButton value="Delete Selected" icon="ui-icon-close" update="fields" actionListener="#{tree.selectedNode.deleteField}"  style="font-size: small"/>
                                <p:commandButton value="Delete All" icon="ui-icon-close" update="fields" actionListener="#{tree.selectedNode.deleteAllFields}" style="font-size: small"/>
                                <p:commandButton value="Close" oncomplete="viewD.hide()" style="font-size: small"/>
                            </f:facet>
                        </p:dataTable>
                    </p:dialog>
                </h:form>
            </p:layoutUnit>

            <p:layoutUnit id="north" position="north" size="50" resizable="false" closable="false" collapsible="false" >
                <h:form id="menubar_form">
                    <p:menubar autoDisplay="false" style="overflow: visible" >
                        <p:submenu label="Tree" >
                            <p:menuitem value="Save to xml" update=":dialog_form:messages" ajax="false" actionListener="#{FileDownloadManager.downloadXML}"/>
                            <p:menuitem value="Save to database" update=":dialog_form:messages" ajax="false" actionListener="#{FileDownloadManager.saveToDatabase}"/>
                            <p:menuitem value="Reset" actionListener="#{tree.reset}" update=":treeForm:tree"/>
                        </p:submenu>
                        <p:submenu label="Help">
                            <p:menuitem value="How to use" oncomplete="helpD.show()"/>
                            <p:menuitem value="About"/>
                        </p:submenu>

                    </p:menubar>
                </h:form>
            </p:layoutUnit>

            <p:layoutUnit id="south" position="south" size="200" header="File Upload" resizable="true" closable="false" collapsible="true">
                <h:form id="upload_form"  enctype="multipart/form-data" >
                    <p:fileUpload fileUploadListener="#{FileUploadManager.handleFileUpload}"
                                  mode="advanced"
                                  update=":dialog_form:messages"
                                  auto="true"
                                  label="Upload File"
                                  invalidFileMessage="Invalid file type. Supported types: xml,jpg,jpeg,png"
                                  invalidSizeMessage="Invalid file size. Maximum size is 1 Mbyte"
                                  sizeLimit="1048576" 
                                  allowTypes="/(\.|\/)(xml|jpe?g|png)$/"
                                  styleClass=""/>
                </h:form>

            </p:layoutUnit>

            <p:layoutUnit id="west" position="west" size="250" header="Navigation" resizable="true" closable="false" collapsible="true">
                <p:panelGrid columns="1" style="width: 100%" >
                    <h:link value="UMAT" outcome="goToHome"/>
                    <h:link value="Registration settings" outcome="goToRegistrationSettings"/>
                    <h:link value="Registration" outcome="goToLogin"/>
                </p:panelGrid>
            </p:layoutUnit>

            <p:layoutUnit id="east" position="east" size="400" header="Controls" resizable="true" closable="false" collapsible="true" effect="drop">
                <p:accordionPanel id="leftMenus" activeIndex="0" multiple="true" cache="true" >

                    <p:tab title="Add Node">
                        <h:form id="nodeForm">
                            <h:panelGrid columns="2" cellpadding="5">
                                <h:outputLabel for="nodeName" value="Node name:"></h:outputLabel>
                                <p:inputText id="nodeName" required="true" requiredMessage="Please input node name" value="#{tree.name}" />
                                <p:commandButton id="addNodeButton" value="Add" update=":treeForm, nodeForm" action="#{tree.addNode}"/>
                            </h:panelGrid>
                        </h:form>
                    </p:tab>
                    <p:tab title="Field Controls">
                        <h:form id="fieldForm" >
                            <h:panelGrid columns="2" cellpadding="5">
                                <h:outputLabel for="typeMenu" value="Field Type:"/>
                                <p:selectOneMenu id="typeMenu" required="false" value="#{tree.selectedNode.fieldType}">
                                    <f:selectItem itemLabel="String" itemValue="String" />
                                    <f:selectItem itemLabel="Integer" itemValue="Integer" />
                                    <f:selectItem itemLabel="Double" itemValue="Double" />
                                    <f:selectItem itemLabel="Date" itemValue="Date" />
                                    <f:selectItem itemLabel="Image" itemValue="Image" />
                                </p:selectOneMenu>
                                <h:outputLabel for="fieldName" value="Field Name:"></h:outputLabel>
                                <p:inputText id="fieldName" required="true" value="#{tree.selectedNode.fieldName}"/>
                                <p:commandButton id="addFieldButton" update=":dialog_form:messages, :treeForm:viewDialog, fieldForm" value="Add"  actionListener="#{tree.selectedNode.addField}"/>
                            </h:panelGrid>
                        </h:form>
                    </p:tab>
                </p:accordionPanel>
            </p:layoutUnit>
        </p:layout>      
    </h:body>
</html>